<template>
<div class="my-login">
    <div class="my-login-body">
        <el-row>
            <el-col :span="12">
                <div class="bg"></div>
            </el-col>
            <el-col :span="12" class="my-login-form">
                <div class="form-bg">
                    <h2 class="title tc">
                        <img class="logo" src="@/assets/img/logo-mini.png" alt="logo" />
                        用户登录</h2>
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="90px" class="demo-ruleForm">
                        <el-form-item class="my-login-form-item" label="账号" prop="username">
                            <el-input placeholder="请输入账号, admin" type="username" v-model="ruleForm.username" autocomplete="off">
                            </el-input>
                        </el-form-item>
                        <el-form-item  class="my-login-form-item" label="密码" prop="password">
                            <el-input placeholder="请输入密码, 123" type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                        </el-form-item>
                        <!-- <el-form-item  class="my-login-form-item code-item clearfix" label="验证码" prop="code">
                            <el-input class="fl tl" maxlength="6" type="text" v-model="ruleForm.code" autocomplete="off"></el-input>
                            <div class="img-code fl clearfix">
                                <div class="img fl">
                                    <img src="" alt="">
                                </div>
                                <span class="change-code fl">换一张</span>
                            </div>
                        </el-form-item> -->
                        <el-form-item class="my-login-form-submit tc">
                            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</div>
</template>
<style lang="less" scoped>
    .@{css-prefix}-login {
        width: 100%;
        height: 100%;
        background-color: @f8;

        &-header {
            width: 100%;
            height: 100px;
            padding: 20px 0;
            box-sizing: border-box;
            overflow: hidden;
            background-color: @fff;
            .img {
                height: 60px;
                top: 20px;
                width: 160px;
                margin-right: 10px;
                background: @bg-color;
                img {
                    width: 100%;
                    vertical-align: middle;
                }
            }
            .title {
                line-height: 60px;
                font-size: 32px;
                padding-left: 10px;
                color: @black;
                white-space: nowrap;
                position: relative;
                &::before {
                    content: "";
                    position:absolute;
                    left: 0;
                    top: 15px;
                    height: 32px;
                    width: 2px;
                    background: @color999;
                }
            }
        }
        .bg {
            height: 100vh;
            width: 100%;
            background-color: @primary;
        }
        .form-bg {
            width: 400px;
            margin: 0 auto;
        }
        &-body {
            width: 100%;
            // padding : 60px 0;
            background-color: @bg-color;
            min-height: 500px;
        }
        &-form {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: center;
            &-item {
                text-align: center;
                label {
                    text-align: center;
                    width: 60px !important;
                }
                &.el-form-item {
                    margin-bottom: 24px;
                }
                .el-form-item__content {
                    margin-left: 60px !important;
                    text-align: center;
                }
                input {
                    border: 1px solid @border;
                }
                &.code-item {
                    .el-input {
                        width: 80px;
                    }
                    .img-code {
                        margin-left: 10px;
                        width: 110px;
                        .img {
                            height: 100%;
                            width: 60px;
                            background: @bg-color;
                        }
                        .change-code {
                            margin-left: 5px;
                        }
                    }
                }
            }
            &-submit {
                margin-top: 20px;
                button {
                    width: 100%;
                }
            }
            .title {
                .logo {
                    margin-right: 20px;
                }
                font-size: 26px;
                padding-left: 50px;
                margin-bottom: 30px;
            }
        }
    }
</style>

<script>
// import { setToken } from '@/utils/index'
import { mapActions } from 'vuex' // 引入vuex
export default {
    data () {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'))
            } else {
                callback()
            }
        }
        var validateUsername = (rule, value, callback) => {
            if (value === '' || value !== 'admin') {
                callback(new Error('请输入正确的账号'))
            } else {
                callback()
            }
        }
        var validateCode = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入验证码'))
            } else {
                callback()
            }
        }
        return {
            ruleForm: {
                password: '',
                username: '',
                code: ''
            },
            rules: {
                password: [
                    { required: true, validator: validatePass, trigger: 'blur' }
                ],
                username: [
                    { required: true, validator: validateUsername, trigger: 'blur' }
                ],
                code: [
                    { required: true, validator: validateCode, trigger: 'blur' }
                ]
            }
        }
    },
    created () {
        // 登录，退出登录删除页面导航
        this.$local.del('navList')
    },
    methods: {
        // user是指modules文件夹下的user.js
        // handleLogin user.js文件中的actions里的方法，在上面的@click中执行并传入实参
        ...mapActions('user', ['handleLogin', 'getUserInfo']),
        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleLogin(this.ruleForm).then(res => {
                        this.getUserInfo().then(res => {
                            this.$router.push('/home')
                        })
                    }).catch(err => {
                        console.log(err)
                    })
                    // this.$router.push('/')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        resetForm (formName) {
            this.$refs[formName].resetFields()
        }
    }
}
</script>
